import React, { Component, Fragment } from 'react' 
import './style.css'
export default class App extends Component {

  constructor(props){
    super(props)
    this.state = {
        inputValue:'',
        list:[]
    }
  }

  render() {
    return (
      // 注释内容
      <Fragment>
         <div> 
             {/* 注释内容 */}
            <label htmlFor="insertArea">输入内容</label>
            <input id="insertArea" className="input" type="text" value={this.state.inputValue} onChange= {e =>this.handleInputChange(e)}  /> 
            <button onClick={()=>this.handleButtonClick()}>提交</button>
          </div>
         <ul>
           {
             this.state.list.map((item,index)=>{
                return <li key={item}
                        onClick={()=>this.handleItemDelete(index)}
                        dangerouslySetInnerHTML={{__html:item}}> 
                      </li>
             })
           } 
         </ul>
      </Fragment>
    )
  }


  handleInputChange(e){
    // console.log(e.target.value);
    this.setState({
      inputValue: e.target.value
    }) 
  }

  handleButtonClick(){
     this.setState({
       list: [...this.state.list,this.state.inputValue],
       inputValue:''
     }) 
  }

  handleItemDelete(index){
    let newList = [...this.state.list] 
    newList.splice(index,1)
    this.setState({
      list: newList
    }) 
  }

}
